<template>
  <div class="page-container">
    <div class="login-content"></div>
    <div class="login-container">
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="rules"
        label-width="80px"
      >
        <div class="title">后台管理系统</div>
        <el-form-item label="" prop="username">
          <el-input
            prefix-icon="el-icon-user"
            v-model="loginForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input
            type="password"
            prefix-icon="el-icon-lock"
            v-model="loginForm.password"
            show-password
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="" prop="code" style="">
          <img
            class="code-img"
            :src="codeImg"
            @click="getVerificationCode()"
            style="height: 38px; vertical-align: middle"
          />
          <el-input
            style="width: calc(100% - 140px); margin-left: 20px"
            v-model="loginForm.code"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            class="login-bth"
            type="primary"
            @click="submitForm('loginForm')"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { Form, FormItem, Input, Button } from "element-ui";
import { UserValidation, GetVerificationCode } from "../api/Authentication";

export default {
  components: {
    [Form.name]: Form,
    [FormItem.name]: FormItem,
    [Input.name]: Input,
    [Button.name]: Button,
  },
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        code: "",
      },

      codeImg: "",
      codeId: "",
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm() {
      UserValidation(
        this.loginForm.username,
        this.loginForm.password,
        this.loginForm.code,
        this.codeId
      ).then((result) => {
        console.log(result.data);
        localStorage.setItem("token", result.data);
        this.$router.push("/GuidePage");
      });
    },
    getVerificationCode() {
      GetVerificationCode().then((result) => {
        this.codeId = result.data.id;
        this.codeImg = result.data.verificationCodeImg;
      });
    },
    destroyed() {
      window.removeEventListener("keyup", this.onSubmit, false);
    },
    onSubmit(e) {
      // debugger
      if (e.keyCode == 13 || e.keyCode == 100) {
        this.submitForm();
      }
    },
  },
  mounted() {
    // debugger
    window.addEventListener("keyup", this.onSubmit, false);
  },
  created() {
    this.getVerificationCode();
  },
};
</script>

<style scoped>
.login-container {
  width: 500px;
  display: flex;
  height: 100vh;
  background-color: #f0f0f0;
  align-items: center; /* 垂直居中 */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
.login-content {
  width: calc(100vw - 500px);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../assets/image/login-bg.png");
  background-position: center center; /* 图片居中 */
  background-repeat: no-repeat; /* 不重复 */
  background-size: 40%;
}

.page-container {
  display: flex;
}
.login-container > .el-form {
  width: 90%;
  margin-top: -150px;
}
.title {
  font-size: 22px;
  margin-bottom: 50px;
  text-align: center;
}
.login-bth {
  width: 100%;
}

.code-img:hover {
  cursor: pointer;
}
</style>
